<template>
  <view class="report-content" style="height: 100%">
    <z-paging-swiper class="page-swiper">
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
      <template #top>
        <!-- 头部自定义导航栏 -->
        <view class="tabbar">
          <tm-tabs
            showTabsLineAni
            itemModel="line"
            :list="tabsTitle"
            activeFontColor="blue"
            tabs-line-ani-color="blue"
            unSelectedColor="#7c90ad"
            rang-key="name"
            :width="690"
            :default-name="selectKey"
            v-model:active-name="selectKey"
            @change="headChange"
          ></tm-tabs>
          <tm-icon
            name="tmicon-zidingyi"
            style="background-color: pink; padding: 15rpx 5rpx"
            @click="filterIconClick"
          ></tm-icon>
        </view>
      </template>
      <view class="" style="height: 100%">
        <swiper class="swiper" :current="current" @animationfinish="swiperAnimationfinish">
          <swiper-item class="swiper-item" v-for="item in tabsTitle" :key="item.key">
            <z-paging
              ref="paging"
              v-model="dataList"
              @query="queryList"
              :fixed="false"
              :auto="false"
            >
              <view class="">12323232</view>
            </z-paging>
          </swiper-item>
        </swiper>
      </view>
    </z-paging-swiper>

    <filter-market-view v-model:isShow="marketShow">
      <view class="filter-market">
        <view class="check-view">
          <view class="check-title">
            <tm-text class="pb-24">状态</tm-text>
          </view>
          <check-box-list
            :sourceArr="['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7', '选项8']"
          ></check-box-list>
        </view>

        <view class="check-view">
          <view class="check-title">
            <tm-text class="pb-24">类型</tm-text>
          </view>
          <check-box-list
            :sourceArr="['类型1', '类型2', '类型3', '类型4', '类型5', '类型6', '类型7', '类型8']"
          ></check-box-list>
        </view>
        <view class="button-view flex-row">
          <tm-button label="重置" text fontColor="black" @click="resetClick"></tm-button>
          <tm-button label="确定" @click="sureButtonClick"></tm-button>
        </view>
      </view>
    </filter-market-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import FilterMarketView from "./filterMarketView.vue";
import CheckBoxList from "./checkBoxList.vue";
const selectKey = ref("1");
const dataList = ref([]);
const paging = ref();
const tabsTitle = [
  {
    name: "全部",
    key: "1"
  },
  {
    name: "待处理",
    key: "2"
  },
  {
    name: "待收费",
    key: "3"
  },
  {
    name: "待评价",
    key: "4"
  },
  {
    name: "挂起中",
    key: "5"
  },
  {
    name: "被知会",
    key: "6"
  },

  {
    name: "其他",
    key: "7"
  }
];
const current = ref(0);
const marketShow = ref(false);
function headChange() {
  current.value = +selectKey.value - 1;
}
function swiperAnimationfinish(e: any) {
  current.value = e.detail.current;
  selectKey.value = current.value + 1 + "";
}
function queryList() {
  setTimeout(() => {
    paging.value.complete([]);
  }, 3000);
}

function filterIconClick() {
  marketShow.value = true;
}
function resetClick() {}

function sureButtonClick() {}
</script>

<style lang="scss" scoped>
.tabbar {
  padding: 0 20rpx;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.report-content {
  position: relative;
}
.page-swiper {
  position: absolute;
}
.swiper {
  height: 100%;
}
.filter-market {
  width: 750rpx;
  height: 800rpx;
  position: relative;
  .check-view {
    .check-title {
      padding: 10rpx;
    }

    background-color: pink;
    max-height: 300rpx;
    overflow: auto;
  }
}
.button-view {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  position: absolute;
  bottom: 20rpx;
  left: 0;
  right: 0;
}
</style>
